Leaflet地图实现定位搜索

您所在的位置：网站首页 › leaflet 定位准确吗 › Leaflet地图实现定位搜索

Leaflet地图实现定位搜索

2023-10-05 00:51| 来源: 网络整理| 查看: 265

我用的是天地图里的api，因为是使用leaflet框架混合天地图开发的，功能也不是特别完善，也不是最优方案，有机会学习一下leaflet框架中定位搜索的api

// 搜索地名 searchMap() { console.log(document.getElementById('boox').val, this.searchName, 'searchName') this.poisArr = [] //地方名称 console.log('触发搜索') this.isShow = true this.clearAll() const _that = this let addresServer = `http://api.tianditu.gov.cn/v2/search?postStr={"keyWord":"${ _that.searchName}","level":12,"mapBound":"116.02524,39.83833,116.65592,39.99185","queryType":1,"start":0,"count":10}&type=query&tk=天地图key` axios .get(addresServer) .then(res => { this.rt = res if (res.status == 200) { switch (res.data.resultType) { case 1: //解析点数据结果 this.rt = res.data.pois this.pois(this.rt) break case 2: //解析推荐城市 this.rt = res.data.statistics this.statistics(this.rt) break case 3: //解析行政区划边界 this.rt = res.data.area this.area(this.rt) break case 4: //解析建议词信息 this.rt = res.data.suggests break case 5: //解析公交信息 this.rt = res.data.lineData break } } else { console.log(res.statusText) } console.log(this.rt, ';解析后的rt') }) .catch(err => { console.log(err) }) }, pois(obj) { //obj是天地图后台返回来的数据 this.isShow = true this.poisArr = [] //地方名称 this.poisMarkerArr = [] //地方坐标 var _that = this var markerGroup = null var myIcon = L.icon({ iconUrl: 'http://ny.tsrnjs.com/upload/guanlifang.png' }) if (obj) { var divMarker = document.createElement('div') for (var i = 0; i < obj.length; i++) { ;(function(i) { var name = obj[i].name //名称 var address = obj[i].address //地址 var lnglatArr = [] //坐标 lnglatArr.push(obj[i].lonlat.split(',')[1], obj[i].lonlat.split(',')[0]) _that.poisMarkerArr.push(lnglatArr) var markerr = L.marker(lnglatArr, { icon: myIcon }).bindPopup(name, address) markerGroup = L.layerGroup([markerr]).addTo(_that.map) _that.poisArr.push(name) })(i) } _that.map.flyTo(_that.poisMarkerArr[0], 13)(zoomArr) document.getElementById('searchDiv').appendChild(divMarker) document.getElementById('resultDiv').style.display = 'block' } }, statistics(obj) { this.isShow = false console.log(obj, 'statistics') this.poisArr = ['您搜索的在以下城市有结果：'] this.poisMarkerArr = [] if (obj) { if (obj.priorityCitys) { for (let i = 0; i < obj.priorityCitys.length; i++) { this.poisArr.push(obj.priorityCitys[i].adminName) } } document.getElementById('statisticsDiv').style.display = 'block' document.getElementById('statisticsDiv').innerHTML = priorityCitysHtml + allAdminsHtml } }, area(obj) { this.isShow = false let poly = obj.lonlat.split(',') console.log(obj, typeof poly, 'area') this.map.flyTo(poly.reverse(), 13) // var polygon = L.polygon(poly, { color: '#333', weight: 4 }).addTo(this.map) }, prompt(obj) { console.log(obj, 'promptobj') var prompts = obj.getPrompt() console.log(prompts, 'prompts') if (prompts) { var promptHtml = '' for (var i = 0; i < prompts.length; i++) { var prompt = prompts[i] var promptType = prompt.type var promptAdmins = prompt.admins var meanprompt = prompt.DidYouMean if (promptType == 1) { promptHtml += '

您是否要在' + promptAdmins[0].name + '搜索更多包含' + obj.getKeyword() + '的相关内容？

' } else if (promptType == 2) { promptHtml += '

在' + promptAdmins[0].name + '没有搜索到与' + obj.getKeyword() + '相关的结果。

' if (meanprompt) { promptHtml += "

您是否要找：" + meanprompt + '

' } } else if (promptType == 3) { promptHtml += "

有以下相关结果，您是否要找：

" for (i = 0; i < promptAdmins.length; i++) { promptHtml += '

' + promptAdmins[i].name + '

' } } } if (promptHtml != '') { document.getElementById('promptDiv').style.display = 'block' document.getElementById('promptDiv').innerHTML = promptHtml } } }, searchResult(result) { const _that = this console.log(result) _that.map.removeLayer(this.marker) // 工业用地 _that.marker = new L.layerGroup() // document.getElementById("zuobiao").value = result.location.lat + ',' + result.location.lon // if (result.getStatus() == 0) { _that.map.panTo(result, 16) // 跳转 //创建标注对象 let gurl = '', // 标注图片 isize = [30, 30] let myIcon = L.icon({ iconUrl: gurl, iconSize: isize, iconAnchor: [9, 20], shadowSize: [68, 95], shadowAnchor: [22, 94] }) _that.marker = new L.Marker(result, { icon: myIcon }) // 添加标注 //向地图上添加标注 _that.marker.addTo(_that.map) _that.searchShow = false }

地图搜索分为五级吧在我理解中，最后两个没搞，感觉用处不大并且费事，先实现最基本的功能

【本文地址】

Leaflet地图实现定位搜索

Leaflet地图实现定位搜索

今日新闻

推荐新闻